<template>
  <div>
    <el-button type="text" @click="openDialog">点击打开表单</el-button>

    <!-- 对话框 -->
    <el-dialog title="编辑房屋" :visible.sync="dialogVisible" width="50%" :before-close="handleClose" class="dialog">
      <h2 class="dialog-title">
        基础信息
      </h2>
      <el-form ref="form" :inline="true" :model="form" label-width="80px">
        <el-form-item label="楼栋" prop="building" :rules="{ required: true, message: '楼栋不能为空', }">
          <el-select v-model="form.building" placeholder="请选择">
            <el-option v-for="(item, index) in build" :key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单元" :rules="{ required: true, message: '单元不能为空' }" prop="unit">
          <el-select v-model="form.unit" placeholder="请选择">
            <el-option v-for="(item, index) in unit" :key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼层" :rules="{ required: true, message: '楼层不能为空' }" prop="floor">
          <el-select v-model="form.floor" placeholder="请选择">
            <el-option v-for="(item, index) in floor" :key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房间号" :rules="{ required: true, message: '房间号不能为空' }" prop="roomNumber">
          <el-select v-model="form.roomNumber" placeholder="请选择">
            <el-option v-for="(item, index) in room" :key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="户主" :rules="{ required: true, message: '户主不能为空' }" prop="owner">
          <el-input v-model="form.owner"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :rules="[
          { required: true, message: '手机号不能为空' },
          { message: '请输入正确的手机号', pattern: /^1[3-9]\d{9}$/, trigger: ['blur', 'change'] }
        ]" prop="phoneNumber">
          <el-input v-model="form.phoneNumber"></el-input>
        </el-form-item>
      </el-form>
      <div class="btn">
        <!-- <el-button type="primary" @click="onSubmit('form')">立即创建</el-button> -->
        <el-button @click="handleClose">取消</el-button>
        <BlueBtn @click.native="onSubmit('form')">确定</BlueBtn>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import BlueBtn from './BlueBtn.vue';
export default {
  components: {
    BlueBtn
  },
  data() {
    return {
      dialogVisible: true, // 控制对话框的显示与隐藏
      form: {
        building: '',
        unit: '',
        floor: '',
        roomNumber: '',
        owner: '',
        phoneNumber: '',
      },
      //楼栋
      build: ['楼栋A', '楼栋B'],
      //单元
      unit: ['单元1', '单元2'],
      //楼层
      floor: ['1', '2', '3'],
      //房间
      room: ['101', '102', '103', '201', '202'],


    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true; // 显示对话框
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.dialogVisible = false
        })
        .catch(_ => { });
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          for (let item in this.form) {
            console.log(this.form[item])
          }
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
        } else {
          return false;
        }
      });
    }


  }
};
</script>
<style scoped>
.dialog>>>.el-dialog {
  margin-top: 0 !important;
}

.el-dialog__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  margin-top: 20px;
  text-align: right;
  padding-right: 120px;
}

.btn>>>.el-button--default {
  height: 32px;
  width: 94px;
  padding: 0;
  margin-right: 20px;
}

.dialog>>>.el-form {
  margin-top: 20px;
  padding: 0 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.dialog-title {
  font-size: 14px;
  color: #000;
  padding-bottom: 15px;
  border-bottom: 1px solid #cacaca;
}
</style>